<template>
	<view class="">
		<view class="" v-if="showType!=4">

			<view class="radar_tab_box">
				<u-tabs :scrollable="false" lineWidth="60rpx" lineHeight="4rpx" fontSize="28rpx" :activeColor="activeColor"  inactiveColor="#333333" :lineColor="activeColor" itemStyle="width: 25%;padding: 24rpx 0;" ref="uTabs" :list="list"
					:current="current" @change="tabsChange" swiperWidth="750rpx"></u-tabs>
			</view>
			<view class="tab_content bc_fff">
				<DataView :managerId="managerId" :ossUrl="ossUrl" :userType="showType" v-if="current==0&&showPages" :tenantId="tenantId" />
				<AiContent :managerId="managerId" :userType="showType" :current="current" :normalUser="normalUser" v-if="current==1" :tenantId="tenantId"/>
				<BehaviorAnalysis :managerId="managerId" :userType="showType"  :tenantId="tenantId"  v-if="current==2" />
				<UserOrder :managerId="managerId" :ossUrl="ossUrl" :userType="showType" :tenantId="tenantId" v-if="current==3" />
			</view>
		</view>
		<view class="" v-else>
			<UserIndex :normalUser="normalUser" :ossUrl="ossUrl" :userType="showType" :tenantId="tenantId" />
		</view>
	</view>

</template>

<script>
	import DataView from "./components/dataView.vue"
	import AiContent from "./components/aiContent.vue"
	import BehaviorAnalysis from "./components/behaviorAnalysis.vue"
	import UserOrder from "./components/userOrder.vue"
	import UserIndex from "./components/userIndex.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			AiContent,
			DataView,
			BehaviorAnalysis,
			UserOrder,
			UserIndex
		},
		computed: {
			...mapState(['userType']),
		},
		data() {
			return {
				normalUser:1,
				// userType:1,
				tenantId:uni.getStorageSync("tenantId"),
				ossUrl: this.$ossUrl,
				list: [{
					name: '数据总览'
				}, {
					name: 'AI追踪'
				}, {
					name: '行为分析'
				}, {
					name: '用户订单'
				}],
				colorList:["#1C76FE","#FE5A1C","#202020"],
				activeColor:"#1C76FE",
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				showType:2,
				managerId:'',
				showPages:false
			}
		},
		onLoad(options) {
			console.log("获取到的参数")
			console.log(options)
			if (options&&options.showType){
				
				this.showType = options.showType
				
			}
			if (options&&options.managerId){
				
				this.managerId = options.managerId
				
			}
		
			// this.activeColor = this.colorList[this.userType - 1]
			// console.log("页面加载")
			// console.log(this.activeColor)
			// console.log(this.userType)
		},
		onShow() {
			this.activeColor = this.colorList[this.showType - 1]
			this.normalUser = Math.random()
			setTimeout(()=>{
				this.showPages = true
			},100)
			console.log("页面加载")
			console.log(this.activeColor)
			console.log(this.userType)
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(e) {
				console.log("tab点击")
				console.log(e)
				this.current = e.index;
				console.log(this.current)
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.radar_tab_box{
		// border: 1px solid red;
		width: 100%;
		height: 94rpx;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #ffffff;
		z-index:10
	}
	.tab_content {
		padding-top: 94rpx;
		background-color: #ffffff;
		// background-color: #f6f6f6;
	}
</style>